<template>
  <a-table
    v-if="dataList.length > 0"
    :columns="columns"
    :data-source="dataList"
    rowKey="id"
    :pagination="false"
    :loading="loading"
  >
    <span slot="index" slot-scope="text, record, index">
      {{ index + 1 }}
    </span>
    <span slot="nameSlot" slot-scope="text, record">
      <a-tooltip placement="top">
        <template slot="title">
          <span>{{ record.file.filename }}</span>
        </template>
        {{ record.file.filename }}
      </a-tooltip>
    </span>
    <span slot="timeSlot" slot-scope="text, record">
      <a-tooltip placement="top">
        <template slot="title">
          <span>{{ record.createtime | getTimeFormat('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
        {{ record.createtime | getTimeFormat('YYYY-MM-DD HH:mm:ss') }}
      </a-tooltip>
    </span>
    <span slot="operation" slot-scope="text, record">
      <template>
        <a @click="previewFile(record)">查看</a>
        <a-divider type="vertical" />
        <a @click="downloadFile(record.file.path, record.file.filename)">下载</a>
      </template>
    </span>
  </a-table>
  <a-empty v-else />
</template>
<script>
import { getAllMaterialByApplyId } from '@/api/accept/aprv_process_materials'
import { kkfilePreview } from '@/utils/util.js'

export default {
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: false, // 遮罩是否显示
      columns: [
        // 表头配置
        {
          title: '序号',
          align: 'center',
          width: '120px',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '文书名称',
          align: 'left',
          width: '30%',
          scopedSlots: { customRender: 'nameSlot' },
        },
        {
          title: '时间',
          align: 'left',
          width: '30%',
          scopedSlots: { customRender: 'timeSlot' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '150px',
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      dataList: [],
      activeKey: [],
    }
  },
  created() {
    this.getNoticesList()
  },
  methods: {
    async getNoticesList() {
      const { data } = await getAllMaterialByApplyId({'applyid': this.applyid})
      this.dataList = data || []
    },
    previewFile(record) {
      window.open(kkfilePreview(record.file.path))
    },
    downloadFile(url, fileName) {
      var x = new XMLHttpRequest()
      x.open('GET', url, true)
      x.responseType = 'blob'
      x.onload = function (e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a')
        a.href = url
        a.download = fileName
        a.click()
      }
      x.send()
    },
  },
}
</script>
<style lang="less" scoped>
.editable-row-operations a {
  margin-right: 8px;
}
/deep/ .ant-table-tbody > tr > td {
  border: 0;
}
/deep/.ant-table-thead > tr > th {
  font-size: 16px !important;
  color: #666666 !important;
  border: 0;
}
</style>